<template>
  <div id="form-category" class="form-category" @click="formClistFn">
    <div v-for="item, index of DetailType" class="category">
      <div class="titleBox">
        <div class="leftIcon"></div>
        <div class="title">{{ item.title }}</div>
      </div>
      <div class="contentBox">
        <div class="contentText" v-for="e, i of item.list" @tap.stop="clickContentText(item, e, index)" :key="i"
          :class="{ active: e.selected }">{{ e.attrValue }}</div>
        <input v-if="item.isput" type="text" class="inputSty" v-model="douyinId">
        <Mention v-if="item.isInput" v-model:isListShow="isListShow" :list="mentionList" @searchInput="searchInput"
          @clickItem="clickQuestionItem">
        </Mention>
        <div v-if="!isCanSubmit" style="color: red;">
          <span>
            请输入{{ item.title }}!
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Notify from '../../../../node_modules/@vant/weapp/dist/notify/notify';
import { getDetailType } from '@/api/home';
import { ref, onMounted, watch, defineEmits } from 'vue'
import Mention from './Mention.vue';
import { QsList } from '@/api/home'
const props = defineProps({
  item: Object,
})
const emit = defineEmits(['startAI']);
const item = ref({})
const DetailType = ref([])
const query = ref([])
const sessionContent = ref({})
const douyinId = ref('')
const isListShow = ref(false)

const getDetailTypeMethod = async () => {
  const res = await getDetailType(props.item.title)
  console.log(res, 'aaaaaa');
  res.data.mapList.forEach((item, index) => {
    item.list[0].selected = true
    console.log(index, item.list[0].id, 'index');
    query.value[index] = { id: item.list[0].id }
    item.list.forEach(i => {
      sessionContent.value[item.title] = i.attrValue
    })
  })
  if (props.item.id === 34) {
    res.data.mapList.unshift({ title: '账号id（抖音id）', list: [], isput: true })
  }
  if (props.item.id === 35 || props.item.id === 32) {
    res.data.mapList.push({ title: '猜你想问', list: [], isInput: true })
  }
  DetailType.value = res.data.mapList
}


function clickQuestionItem(question) {
  console.log('点击联系人', question);
  let attrStr = query.value.map(item => item.id).join('|');
  userInput.value = question.question;
  emit('startAI');
  console.log('attrStr', attrStr);


}

watch(() => props.item, (val) => {
  item.value = val
  console.log(item.value, '让我看了看');
  getDetailTypeMethod()
  console.log(query.value, '我是详情页面');
}, {
  immediate: true
})
let userInput = ref('');
let isCanSubmit = ref(true);
let mentionList = ref([]);
let arrtrStrArr = ref('');


function searchInput(keyword) {
  userInput.value = keyword;

  let queryIdList = query.value.map(item => item.id);
  const params = queryIdList.join('|')
  arrtrStrArr.value = params

  if (!arrtrStrArr.value)
    return
  const req = {
    currentPage: 1,
    limit: 20,
    typeName: item.value.title,
    attrStr: params,

  }

  if (keyword) {
    req.keyword = keyword

  }
  else {

  }
  QsList(req).then(({ data }) => {
    mentionList.value = data.map((item) => {
      return {
        ...item,
        label: item.question,
        value: item.question,
      }
    })
    console.log('mentionList', mentionList.value);
  })
}

const clickContentText = (item, e, index) => {
  item.list.forEach(item => {
    item.selected = false
  })
  sessionContent.value[item.title] = e.attrValue
  if (props.item.id === 34) {
    query.value[index - 1] = { id: e.id }
  } else {
    query.value[index] = { id: e.id }
  }
  e.selected = true
  Notify({
    message: e.attrValue,
    type: 'primary',
    background: '#83CD88',
    duration: '1000',
    safeAreaInsetTop: true
  });
  isListShow.value = true
  searchInput()
  // mentionList.value = [];

}


const formClistFn = () => {
  isListShow.value = false
}

// 暴露属性给外部组件使用
defineExpose({ query, sessionContent, userInput, douyinId })
</script>
<style lang="less" scoped>
.form-category {

  .category {

    .titleBox {
      position: relative;

      .leftIcon {
        position: absolute;
        top: 6rpx;
        left: 0;
        width: 12rpx;
        height: 18rpx;
        background: var(--a-main-color);
        border-radius: 16rpx;
      }

      .title {
        height: 37rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: var(--a-one-text-color);
        line-height: 33rpx;
        margin-left: 30rpx;

      }
    }

    .contentBox {
      margin-top: 22rpx;
      display: flex;
      flex-wrap: wrap;

      .contentText {
        width: 160rpx;
        height: 80rpx;
        box-sizing: border-box;
        background-color: var(--a-main-box-bg-color);
        border-radius: 20rpx;
        color: var(--a-two-text-color);
        text-align: center;
        line-height: 80rpx;
        font-size: 26rpx;
        margin: 0 7rpx 20rpx;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .inputSty {
        box-sizing: border-box;
        display: block;
        width: 690rpx;
        height: 86rpx;
        background: var(--a-main-box-bg-color);
        border-radius: 20rpx;
        margin: 0 0 35rpx;
        color: var(--a-one-text-color);
        padding-left: 20rpx;

      }

      .active {
        background-color: var(--a-main-color);
        color: #FFF;
        border: none;
      }
    }
  }
}
</style>